<template>
  <div>
    <!-- 表单数据 -->
    <div class="form-box">
      <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="任务编号:">
          <el-input v-model="formData.user" placeholder="请输入任务编号" />
        </el-form-item>
        <el-form-item label="任务分配状态:">
          <el-select v-model="formData.status" placeholder="请选择">
            <el-option label="已分配" value="1" />
            <el-option label="带人工分配" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="满载状态:">
          <el-select v-model="formData.loadingStatus" placeholder="请选择">
            <el-option label="满载" value="3" />
            <el-option label="空载" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:">
          <el-input v-model="formData.user" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="起始地机构:">
          <el-select v-model="formData.startAgency.name" placeholder="请输入起始地机构">
            <template>
              <el-tree
                ref="tree"
                node-key="name"
                :expand-on-click-node="false"
                :data="defas"
                :props="defaultProps"
                highlight-current
                check-strictly
                @node-click="handleNodeClick"
              />
            </template>
            <el-option value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="目的地机构:">
          <el-select v-model="formData.endAgency.name" placeholder="请输入目的地机构">
            <template>
              <el-tree
                ref="tree"
                node-key="id"
                :expand-on-click-node="false"
                :data="defas"
                :props="defaultProps"
                highlight-current
                check-strictly
                @node-click="handleNodeClick"
              />
            </template>
            <el-option value="" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单结束 -->
    <!-- 导航切换 -->
    <div class="form-navbar">
      <div class="tab-item" :class="{active:isShow === 0 }" @click="allTrans(null,0)">
        <span class="status">全部</span>
        <span class="status-num" style="font-weight: bold;">{{ sum }}</span>
      </div>
      <div class="tab-item" :class="{active:isShow === 1 }" @click="allTrans(1,1)">
        <span class="status">待提货</span>
        <span class="status-num" style="font-weight: bold;">{{ statistics['1'] }}</span>
      </div>
      <div class="tab-item" :class="{active:isShow === 2 }" @click="allTrans(2,2)">
        <span class="status">进行中</span>
        <span class="status-num" style="font-weight: bold;">{{ statistics['2'] }}</span>
      </div>
      <div class="tab-item" :class="{active:isShow === 4 }" @click="allTrans(4,4)">
        <span class="status">已完成</span>
        <span class="status-num" style="font-weight: bold;">{{ statistics['4'] }}</span>
      </div>
      <div class="tab-item" :class="{active:isShow === 5 }" @click="allTrans(5,5)">
        <span class="status">已取消</span>
        <span class="status-num" style="font-weight: bold;">{{ statistics['5'] }}</span>
      </div>
    </div>
    <!-- 导航结束 -->
    <!-- 表格数据 -->
    <div class="form-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="id" label="运输任务编号" width="180" />
        <el-table-column prop="truck.licensePlate" label="车牌号码" width="140" />
        <el-table-column prop="startAgency.name" label="起始地" width="160" />
        <el-table-column prop="endAgency.name" label="目的地" width="160" />
        <el-table-column label="运输状态" width="140">
          <template slot-scope="{row}">
            <span v-if="row.status === 1">待提货</span>
            <span v-else-if="row.status === 2">进行中</span>
            <span v-else-if="row.status === 4">已完成</span>
            <span v-else>已取消</span>
          </template>
        </el-table-column>
        <el-table-column label="车辆装载状态" width="140">
          <template slot-scope="scope">
            {{ scope.row.loadingStatus === 3 ? '空载' : '满载' }}
          </template>
        </el-table-column>
        <el-table-column label="任务分配状态" width="140">
          <template slot-scope="scope">
            {{ scope.row.assignedStatus === 2 ? '已分配' : '未分配' }}
          </template>
        </el-table-column>
        <el-table-column prop="planArrivalTime" label="计划发车时间" width="180" />
        <el-table-column prop="planDepartureTime" label="实际发车时间" width="180" />
        <el-table-column prop="updated" label="更新时间" width="180" />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">取消</el-button>
            <el-button type="text" size="small">手动调整</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" style="height:60px" align="middle" justify="center">
        <!-- 放置分页组件 -->
        <el-pagination
          layout=" total, sizes, prev, pager, next, jumper"
          :total="counts"
          :current-page="page"
          :page-sizes="[10,15,20,30]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="hCurrentChange"
        />
      </el-row>
    </div>
    <!-- 表格数据结尾 -->
  </div>
</template>

<script>
import { getTree } from '@/api/essentialData'
import { getTransPortation, getStatistics } from '@/api/dispatch'
export default {
  data() {
    return {
      defasname: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defas: [],
      // table数据
      list: [],
      // 分页用的数据
      counts: 0,
      pages: 0,
      page: 1,
      pageSize: 10,
      status: null,
      // 表单数据
      formData: {
        user: '',
        region: '',
        status: '',
        loadingStatus: '',
        startAgency: {
          name: ''
        },
        endAgency: {
          name: ''
        }
      },
      // 运输状态统计
      sum: null,
      statistics: {},
      isShow: 0
    }
  },
  created() {
    this.getTransPortation()
    this.getTree()
    this.getStatistics()
  },
  methods: {
    // 状态切换table 内容
    allTrans(num, index) {
      this.status = num
      this.isShow = index
      this.getTransPortation()
    },
    // 统计运输任务
    async getStatistics() {
      const res = await getStatistics()
      const aa = res.data.data
      this.sum = Object.values(aa).reduce((sum, item) => sum + (+item), 0)
      this.statistics = aa
      console.log(this.sum)
      console.log(this.statistics)
    },
    // 获取机构
    async getTree() {
      const res = await getTree()
      console.log(res)
      this.defas = JSON.parse(res.data.data)
      console.log(this.defas)
    },
    handleNodeClick(data, node) {
      console.log(node)
      this.formData.startAgency.name = data.name
    },
    // 改变每页显示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getTransPortation()
    },
    // 分页点击切换
    hCurrentChange(page) {
      this.page = page
      this.getTransPortation()
    },
    // 获取数据
    async getTransPortation() {
      const res = await getTransPortation({
        page: this.page,
        pageSize: this.pageSize,
        status: this.status
      })
      console.log('获取运输任务分页数据', res)
      this.list = res.data.data.items
      this.counts = +res.data.data.counts
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  margin: 25px 20px 0 20px ;
  height: 200px;
  background-color: #fff;
  padding-top: 20px;
  .el-form--inline .el-form-item{
    margin-left: 30px;
    width: 30%;
    .el-input__inner{
      width: 410px;
    }
  }
}
.form-navbar{
    margin: 20px 20px 0 20px ;
    display: flex;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    .tab-item{
    cursor:pointer;
    width: 120px;
    text-align: center;
    color: #333;
    font-size: 14px;
    }
    .active {
    background-color: #ffeeeb;
    color: #e15536;
  }
}
.form-table{
  margin: 20px 20px 0 20px ;
  padding: 30px;
  background-color: #fff;
}

</style>
